
<html>
<head>
	<title></title>
	<meta charset="utf-8"/>
	<style type='text/css'>
	*{font-family: 微软雅黑}
	body{background: #EFEDEE;}
	</style>
</head>
<body>
	<div style='text-align:center;'>
	<h1>后盾网PHP实训---JavaScript教学小例子</h1>

	<h2>一个简单的后盾网教学实例（JS时钟）</h2>

<h3>后盾网 人人做后盾  只讲真功夫！</h3>
</div>
<!--JavaScript 绘制钟表--后盾网向军  http://www.houdunwang.com-->
<script>
(function(win){
	var clock={};
	clock.elem=null;//钟表容器
	clock.r;//半径
	clock.time=[];//时间
	clock.time["h"]=[];//时
	clock.time["i"]=[];//时
	clock.time["s"]=[];//时
	//运行时钟
	clock.run=function(elem){
		this.r= 250;
		this.elem=this.createClock();//绘制时钟
		this.createText();//写入文字
		this.createPix();//绘制圆点
		this.createNum();//添加数字
		clock.second();//设置秒针
		clock.minutesLine();//分针刻度
		clock.minutes();//设置分针
		clock.hours();//设置时针
		setInterval(function(){
			clock.listen()
		},1000);
	}
	//===========获得点坐标
	//params r 角度
	//params banjing 半径
	clock.getPoint=function(r,banjing){
		var ban = banjing!==undefined?banjing:this.r;//半径
		var hudu = 2*Math.PI/360*(r-90);//弧度
		var x = Math.cos(hudu)*ban;
		var y = Math.sin(hudu)*ban;
		return [x,y];
	}
	//===========写文字
	clock.createText=function(){
		var _text = document.createElement("h2");
		_text.style.cssText="font-size:20px;color:#327289;font-weight:bold;font-family:微软雅黑;position:absolute;left:170px;top:350px;z-index:200;text-align:center;text-shadow:2px 5px 8px #999";
		_text.innerHTML = "后盾网 人人做后盾<br/><span style='font-size:10px;'>HouDunWang.com</span><br/>Author:向军";
		this.elem.appendChild(_text);
		//写入星期
		var date = new Date();
		var week = date.getDay();
		var w = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
		
		_weekDiv = document.createElement("div");
		_weekDiv.style.cssText="font-size:18px;font-family:微软雅黑;font-weight:bold;color:#74BB2A;position:absolute;left:280px;top:190px;z-index:1;text-shadow:3px 3px 2px #000";
		_weekDiv.innerHTML = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+"<br/>"+w[week];
		this.elem.appendChild(_weekDiv);
		//数字时钟
		_weekDiv = document.createElement("div");
		_weekDiv.style.cssText='position:absolute;left:280px;top:250px;background:#333;color:#fff;padding:3px 6px 1px; border-radio:2px;font-size:14px;z-index:1500;border-radius: 10px;box-shadow: #666 10px 10px 15px;';
		_weekDiv.innerHTML=date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒";
		this.time['week']=_weekDiv;
		this.elem.appendChild(_weekDiv);
	}
	//===========画圆形
	clock.createClock=function(){
		var _div=document.createElement("div");
		_div.style.cssText="width:500px;height:500px;border:solid 0px #999;position:absolute;left:50%;margin-left:-250px;background:url(clock_bg.png) 1px 0px no-repeat;";	
		document.body.appendChild(_div);
		return _div;
	}
	//===========绘制点
	clock.createPix=function(){
		for(var i=0;i<360;i++){
			var point = this.getPoint(i);
			var _div = document.createElement("div");
			_div.style.cssText ="width:8px;height:8px;position:absolute;background:#666;overflow:hidden;box-shadow: #333 0px 0px 6px;z-index:100;";
			_div.style.left=point[0]+this.r+"px";
			_div.style.top=point[1]+this.r+"px";
			this.elem.appendChild(_div);
		}
	}
	//===========绘制时间数字
	clock.createNum=function(){
		for(var i=1;i<=12;i++){
			var point = this.getPoint(i*30,this.r-35);
			var _div = document.createElement("div");
			_div.style.cssText ="position:absolute;font-size:45px;font-weight:800;font-family:arial;opacity:0.9;text-shadow:2px 5px 8px #999;";
			_div.style.left=point[0]+this.r-10+"px";
			_div.style.top=point[1]+this.r-22+"px";
			_div.innerHTML = i;
			this.elem.appendChild(_div);
		}
	}
	//===========分针刻度
	clock.minutesLine=function(){
		for(var i=0;i<60;i++){
			for(var j=0;j<14;j++){
				var _div = document.createElement("div");
				_div.style.cssText="width:2px;height:2px;overflow:hidden;background:#8E8F9B;position:absolute;z-index:10";
				var _point = this.getPoint(i*6,this.r-j);
				_div.style.left=_point[0]+this.r+2+"px";
				_div.style.top=_point[1]+this.r+4+"px";
				this.elem.appendChild(_div);
			}
		}
	}
	//===========秒针
	clock.second=function(){
		var date = new Date();
		var second  = date.getSeconds();//获得秒
		for(var i=0;i<220;i++){
			var point = this.getPoint(second*6,i);
			var _div = document.createElement("div");
			_div.style.cssText="width:2px;height:2px;position:absolute;background:#333;overflow:hidden;z-index:1px;box-shadow: #333 0px 0px 6px;";
			_div.style.left=point[0]+this.r+"px";
			_div.style.top=point[1]+this.r+"px";
			this.elem.appendChild(_div);
			this.time["s"][i]=_div;//记录点
		}
	}
	//===========分针
	clock.minutes=function(){
		var date = new Date();
		var minutes  = date.getMinutes();//获得分
		for(var i=0;i<170;i++){
			var point = this.getPoint(minutes*6,i);
			var _div = document.createElement("div");
			_div.style.cssText="width:5px;height:5px;position:absolute;background:#333;overflow:hidden;z-index:1000px;box-shadow: #333 0px 6px 6px;";
			_div.style.left=point[0]+this.r+"px";
			_div.style.top=point[1]+this.r-2+"px";
			this.elem.appendChild(_div);
			this.time["i"][i]=_div;//记录点
		}
	}
	//===========时针
	clock.hours=function(){
		var date = new Date();
		var hours  = date.getHours();//获得分
		for(var i=0;i<110;i++){
			var point = this.getPoint(hours*30,i);
			var _div = document.createElement("div");
			_div.style.cssText="width:10px;height:10px;position:absolute;background:#333;overflow:hidden;z-index:100px;box-shadow: #333 0px 6px 3px;";
			_div.style.left=point[0]+this.r-5+"px";
			_div.style.top=point[1]+this.r-5+"px";
			this.elem.appendChild(_div);
			this.time["h"][i]=_div;//记录点
		}
	}
	//===========监听
	clock.listen=function(){
		var date = new Date();
		//秒
		for(var i=0;i<this.time['s'].length;i++){
			var point = this.getPoint(date.getSeconds()*6,i);
			this.time['s'][i].style.left=point[0]+this.r+"px";
			this.time['s'][i].style.top=point[1]+this.r+"px";
		}
		//分
		for(var i=0;i<this.time['i'].length;i++){
			var point = this.getPoint(date.getMinutes()*6,i);
			this.time['i'][i].style.left=point[0]+this.r-2+"px";
			this.time['i'][i].style.top=point[1]+this.r-2+"px";
		}
		//时
		for(var i=0;i<this.time['h'].length;i++){
			var point = this.getPoint(date.getHours()*30,i);
			this.time['h'][i].style.left=point[0]+this.r-5+"px";
			this.time['h'][i].style.top=point[1]+this.r-5+"px";
		}
		//数字时钟
		this.time['week'].innerHTML=date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒";
	}
	win.clock = clock;
})(window);
</script>

<script>
	clock.run();
</script>

</body>
</html>